<template>
  <div class="help-text-warp">
    <div class="help-text-search">
      <h1>组工助手</h1>
      <div>
        <el-input
          placeholder="我们能帮你什么吗？"
          size="medium"
          clearable
          style="width: 600px; height: 50px; border-radius: 10px"
          v-model="queryForm.textTitle"
        />
        <el-button size="medium" icon="el-icon-search" @click="getTextList">
          搜索
        </el-button>
      </div>
      <p>
        <span>
          热门标签：
          <font
            v-for="(item, index) in items"
            style="font-size: 16px; cursor: pointer;"
            :key="index"
            @click="searchByTag(item.label)"
            >{{ item.label }}&nbsp;</font
          >
        </span>
      </p>
    </div>

    <div class="help-text-content">
      <p><i class="el-icon-question" style="color: red" />常见搜索</p>
      <ol>
        <li v-for="(item, index) in textItem" :key="index">
          <a @click="showPopUp(index)">{{ item.textTitle }}</a>
        </li>
      </ol>
    </div>
    <div class="help-text-footer">
      <el-card class="box-card">
        <i class="el-icon-video-play" />
        <p>入门</p>
        <span>在30分钟内开始使用HelpTextSearch</span>
      </el-card>
      <el-card class="box-card">
        <i class="el-icon-video-play" />
        <p>入门</p>
        <span>在30分钟内开始使用HelpTextSearch</span>
      </el-card>
      <el-card class="box-card">
        <i class="el-icon-video-play" />
        <p>入门</p>
        <span>在30分钟内开始使用HelpTextSearch</span>
      </el-card>
    </div>
    <helpSearchDialog
      ref="helpSearchDialogRef"
      v-if="helpSearchDialogFlag"
      :selected-item="selectedItem"
    />
  </div>
</template>
<script>
import helpSearchDialog from "./helpSearchDialog.vue";
import { helpTextList } from "@/api/knowledge/helpText";
import { getList } from "@/api/knowledge/label";
import store from "@/store";
export default {
  components: { helpSearchDialog },
  data() {
    return {
      items: [],
      searchResults: [],
      textTitle: [],
      total: 0,
      page: {
        currentPage: 1,
        pageSize: 10,
      },
      queryForm: {
        textTitle: ``,
        textLabel: ``,
      },
      isParent: `parent`,
      selectedItem: null,
      textItem: [],
      isParentDataLoaded: false,
      helpSearchDialogFlag: false,
      helpShowTextPageFlag: false,
      textBussinessTypeCode:"111",
      fileBusinessTypeId:"111"
    };
  },
  created() {
    this.getTagDataList();
    this.getTextTitle();
    this.init();
  },
  methods: {
    init() {
      this.helpShowTextPageFlag = true;
      this.helpSearchDialogFlag = true;
    },
    searchByTag(label) {
      this.queryForm.textLabel = label;
      console.log('-----', this.queryForm.textLabel);
      let route = this.$router.resolve({
        path: "/helpShowTextPage",
        query: {
          searchLabel: this.queryForm.textLabel,
          total: this.total,
          isParentDataLoaded: this.isParentDataLoaded,
        },
      });
      window.open(route.href, "_blank");
    },
    getTextList() {
      return new Promise((resolve, reject) => {
        const params = {
          userId: store.getters.user_id.toString(),
          token: store.getters.token.toString(),
          userName: store.getters.userName.toString(),
          data: {
            textBussinessTypeCode: this.textBussinessTypeCode,
            textTitle: this.queryForm.textTitle,
            pageSize: this.page.pageSize,
            currentPage: this.page.currentPage,
          },
        };
        if (this.queryForm.textLabel.length > 0) {
          params.data.textLabel = this.queryForm.textLabel;
        }
        helpTextList(params)
          .then((data) => {
            if (data.result) {
              this.searchResults = data.resultdata.data;
              this.total = data.resultdata.count;
              this.helpShowTextPageFlag = true;

              let route = this.$router.resolve({
                path: "/helpShowTextPage",
                query: {
                  searchTxt: this.queryForm.textTitle,
                  total: this.total,
                  isParentDataLoaded: this.isParentDataLoaded,
                },
              });
              window.open(route.href, "_blank");

              resolve();
            }
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    getTextTitle() {
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        userName: store.getters.userName.toString(),
        data: { textBussinessTypeCode: this.textBussinessTypeCode },
      };
      helpTextList(params).then((data) => {
        if (data.result) {
          this.textItem = data.resultdata.data.slice(0, 9);
        }
      });
    },

    showPopUp(index) {
      this.helpSearchDialogFlag = true;
      this.selectedItem = this.textItem[index];
      this.$refs.helpSearchDialogRef.init();
    },

    getTagDataList() {
      const params = {
        data: { fileBusinessTypeId: this.fileBusinessTypeId },
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        userName: store.getters.userName.toString(),
      };
      getList(params).then((data) => {
        if (data.result) {
          const items = [];
          data.resultdata.data.forEach(function (obj, index) {
            items.push({
              label: obj.labelName,
              index: index,
            });
          });

          this.items = items;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.help-text-warp {
  padding: 10px 0;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  background: #fff;
  .help-text-search {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    // background:blue;
    background-image: url("https://xin-static.cdn.bcebos.com/aiqicha-pc/index/header-background.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 250px;
    color: #fff;
    .el-input__icon .el-icon-search {
      margin-top: -10px;
    }
  }
  >>>.el-input--medium .el-input__inner{
    height:50px;
    margin-left:4px;
  }
  >>>.el-button{
    height: 50px;
  }
  .help-text-content {
    //  padding: 0 300px;
    margin-left: 350px;
    height: 300px;
    p {
      display: inline-block;
      font-size: 20px;
      font-weight: bolder;
      padding: 20px 0;
    }
    ol {
      display: flex;
      flex-wrap: wrap;
      li {
        color: gray; /* 灰色 */
        padding: 5px;
        flex-basis: calc(33.33% - 10px);
        a {
          color: #2f67c3;
          text-decoration: none;
        }
        a:hover {
          text-decoration: underline;
        }
      }
    }
  }

  .help-text-footer {
    padding: 0 400px;
    display: flex; /* 将容器设置为弹性盒子 */
    flex-wrap: wrap; /* 当容器宽度不足以容纳所有项时换行 */
    justify-content: space-around; /* 在每个项目之间平均分配空间 */
    .box-card {
      width: calc(33.33% - 10px); /* 设置卡片宽度为容器宽度的1/3减去间距 */
      margin-top: 10px;
      i {
        font-size: 60px;
        color: #2f67c3;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      p {
        text-align: center;
        font-size: 20px;
        font-weight: bolder;
      }
      span {
        text-align: center;
        display: inline;
      }
    }
  }
}
</style>
